import { useState } from "react";
import { useQueryClient, useMutation } from 'react-query';
import MarkdownEditor from "@/components/markdown-editor";
import MarkdownPreviewer from "@/components/markdown-previewer";
import { EditTip, SaveTip, PreviousTip, NextTip } from "@/components/button-tips";
import { updateChapterTextById } from "@/apis/chapter";
import { updateIntroductionById } from "@/apis/course";


export default function Article({ content, isCourseManager, id, courseId, isIntroduction, previousLink, nextLink }) {
    const queryClient = useQueryClient();

    const mutateChapterText = useMutation(updateChapterTextById, {
        onSuccess: () => {
            queryClient.invalidateQueries(['chapterText', id]);
        },
    });

    const mutateIntroduction = useMutation(updateIntroductionById, {
        onSuccess: () => {
            queryClient.invalidateQueries(['introduction', id]);
        },
    })
    const [markdown, setMarkdown] = useState(content);
    const [isEditing, setisEditing] = useState(false);

    function handleEdit(e) {
        e.preventDefault();
        setisEditing(true);
    }

    function handleChange(e) {
        e.preventDefault();
        setisEditing(false);
        if (markdown !== content) {
            if (isIntroduction) {
                mutateIntroduction.mutate({
                    newIntroduction: markdown,
                    introductionId: id,
                    course,
                });
            } else {
                mutateChapterText.mutate({
                    newChapterText: markdown,
                    chapterTextId: id,
                    courseId,
                });
            }
        }
    }

    return (
        <div className="card">
            {/* article header */}

            <div className="card-header">
                {isCourseManager &&
                    <div className="d-flex ">
                        {isEditing ?
                            <button type="button" onClick={handleChange} className="btn btn-light ms-auto"><SaveTip /></button>
                            : <button type="button" onClick={handleEdit} className="btn btn-light ms-auto"><EditTip /></button>
                        }
                    </div>
                }
            </div>

            {/* article body */}
            {isEditing &&
                <MarkdownEditor initialMarkdown={markdown} setMarkdown={setMarkdown} />
            }
            {!isEditing &&
                <div className="card">
                    <div className="card-body">
                        <MarkdownPreviewer markdown={markdown} />
                    </div>
                </div>
            }

            {/* article footer */}
            {(previousLink || nextLink) &&
                <div className="card-footer">
                    <div className="d-flex  my-3">
                        {previousLink && <a className="me-auto" href={previousLink}>{<PreviousTip />}</a>}
                        {nextLink && <a className="ms-auto" href={nextLink}>{<NextTip />}</a>}
                    </div>
                </div>
            }
        </div >
    )
};
